<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Center point
    const cx = 300;
    const cy = 210;

    // Helper function to draw an arrow
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 8; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
        ctx.restore();
    }
    
    // --- Draw L1 (Outer ellipse) ---
    ctx.lineWidth = 1.5;
    const l1_rx = 250;
    const l1_ry = 130;
    ctx.beginPath();
    ctx.ellipse(cx, cy, l1_rx, l1_ry, -0.05, 0, 2 * Math.PI);
    ctx.stroke();

    // Arrow for L1 (counter-clockwise)
    drawArrow(cx - 30, cy + l1_ry * Math.cos(0.05) - 3, cx - 50, cy + l1_ry * Math.cos(0.05) - 3);

    // Label for L1
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('L₁', cx - 100, cy + l1_ry + 10);


    // --- Draw L2 (Figure-eight loop) ---
    const l2_cross_x = cx;
    const l2_cross_y = cy;
    const l2_loop_width_cp = 150; // Control point x-offset
    const l2_loop_height_cp = 80;  // Control point y-offset

    // Left loop (counter-clockwise)
    ctx.beginPath();
    ctx.moveTo(l2_cross_x, l2_cross_y);
    ctx.bezierCurveTo(l2_cross_x - l2_loop_width_cp, l2_cross_y - l2_loop_height_cp, 
                      l2_cross_x - l2_loop_width_cp, l2_cross_y + l2_loop_height_cp, 
                      l2_cross_x, l2_cross_y);
    ctx.stroke();

    // Right loop (shape)
    ctx.beginPath();
    ctx.moveTo(l2_cross_x, l2_cross_y);
    ctx.bezierCurveTo(l2_cross_x + l2_loop_width_cp, l2_cross_y - l2_loop_height_cp, 
                      l2_cross_x + l2_loop_width_cp, l2_cross_y + l2_loop_height_cp, 
                      l2_cross_x, l2_cross_y);
    ctx.stroke();

    // Arrows for L2
    // Left loop arrow (on top, CCW)
    drawArrow(220, 160, 200, 162);
    
    // Right loop arrow (on top, CW)
    drawArrow(380, 160, 400, 162);
    
    // Label for L2
    ctx.fillText('L₂', l2_cross_x + 30, l2_cross_y - l2_loop_height_cp - 5);
    

    // --- Draw Currents ---
    const current_radius = 12;
    const i1_x = cx - 85;
    const i1_y = cy;
    const i2_x = cx + 85;
    const i2_y = cy;

    // Current I1 (into page)
    ctx.beginPath();
    ctx.arc(i1_x, i1_y, current_radius, 0, 2 * Math.PI);
    ctx.stroke();
    // Cross symbol
    ctx.beginPath();
    const cross_offset = current_radius * 0.707; // sin(45) or cos(45)
    ctx.moveTo(i1_x - cross_offset, i1_y - cross_offset);
    ctx.lineTo(i1_x + cross_offset, i1_y + cross_offset);
    ctx.moveTo(i1_x + cross_offset, i1_y - cross_offset);
    ctx.lineTo(i1_x - cross_offset, i1_y + cross_offset);
    ctx.stroke();
    // Label I1
    ctx.fillText('I₁', i1_x + 3, i1_y - 25);


    // Current I2 (out of page)
    ctx.beginPath();
    ctx.arc(i2_x, i2_y, current_radius, 0, 2 * Math.PI);
    ctx.stroke();
    // Dot symbol
    ctx.beginPath();
    ctx.arc(i2_x, i2_y, current_radius / 3, 0, 2 * Math.PI);
    ctx.fill();
    // Label I2
    ctx.fillText('I₂', i2_x + 25, i2_y);
    
    
    // --- Draw bottom text ---
    ctx.font = '24px STSong';
    ctx.fillText('题 7 图', cx, 420);

</script>
</body>
</html>